<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <!-- Bootstrap -->
    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css"/>
    <link rel="stylesheet" href="font/iconfont.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!--顶部导航-->
<div class="container">
    <header class="navbar navbar-static-top bs-docs-nav" id="top">
        <div class="navbar-header">
            <!--<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar"-->
            <!--aria-controls="bs-navbar" aria-expanded="true">-->
            <!--<span class="sr-only">Toggle navigation</span>-->
            <!--<span class="icon-bar"></span>-->
            <!--<span class="icon-bar"></span>-->
            <!--<span class="icon-bar"></span>-->
            <!--</button>-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar"
                    aria-expanded="true">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="javascript:void(0);" class="navbar-brand visible-lg ">
                <div class="header_img ">
                    <img src="img/logo.png">
                </div>
            </a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">HOME</span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">brands1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands2</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands3</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands4</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">ABOUT US</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">brands1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands2</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands3</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands4</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">BRANDS & PRODUCTS </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">brands1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands2</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands3</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands4</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false"> NEWS</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">brands1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands2</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands3</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands4</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">KNOWLEDGE </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">brands1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands2</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands3</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands4</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">CONTECTUS</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">brands1</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands2</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands3</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">brands4</a></li>
                        <li role="separator" class="divider"></li>
                    </ul>
                </li>
                <li class="dropdown ">
                    <a>
                        <input type="text"/>
                        <icon class="iconfont icon-tubiao11"></icon>
                    </a>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <div class="heade_img visible-lg">
                        <img src="img/guoqi.png">
                    </div>
                </li>
            </ul>
        </nav>
    </header>
</div>
<!--主页图-->
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">
        <div class="head_img">
            <!--<img src="img/banner.png" alt="" class="img-responsive center-block" style="width: 100%;display: block">-->
            <img src="img/banner.png" alt="" class="img-responsive center-block" style="width: 100%;display: block;">
        </div>
    </div>
</div>
<!--带路轮播图的主体-->
<div class="container">
    <div class="row" id="post-list">
        <div class="col-xs-12 col-md-6 col-lg-6">
            <div class="proshow_title">electric carbon fiber heated neck shoulder wrap</div>
            <div class="proshow_subtitle">Heating+Far Infrared Ray+ Magnetic Therapy</div>
            <div class="proshow_content">
                <p><a>1. Internationally advanced intellectual chip technology.</a></p>
                <p><a>2. Quality unique carbon fiber as heating material increase heating effect.</a></p>
                <p><a>3. Applying powerful magnetic power on product.</a></p>
                <p><a>4. Emit far infrared ray and produce powerful pulsed magnetic filed. </a></p>
            </div>
            <div class="proshow_imgbox">
                <div class="imgcell">
                    <img src="img/good1.png"/>
                </div>
                <div class="imgcell">
                    <img src="img/good1.png"/>
                </div>
                <div class="imgcell">
                    <img src="img/good1.png"/>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgbox">
                            <img src="img/body2x.png"/>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgbox">
                            <img src="img/body2x.png"/>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgbox">
                            <img src="img/body2x.png"/>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgbox">
                            <img src="img/body2x.png"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
<!--身体部位-->
<div class="container">
    <p class="part_title">FIND HELP FOR</p>
    <div class=" row part-content">
        <div class=" col-md-2  col-sm-2  col-xs-2 ">
            <div class="part-content_box">
                <div class="img_box"><img src="img/body1.png"></div>
                <div class="partname">shoulder</div>
            </div>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-2 ">
            <div class="part-content_box">
                <div class="img_box"><img src="img/body2.png"></div>
                <div class="partname">knee</div>
            </div>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-2 ">
            <div class="part-content_box">
                <div class="img_box"><img src="img/body3.png"></div>
                <div class="partname">waist</div>
            </div>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-2 ">
            <div class="part-content_box">
                <div class="img_box"><img src="img/body4.png"></div>
                <div class="partname">ankle</div>
            </div>
        </div>
        <div class=" col-md-2 col-sm-2 col-xs-2 ">
            <div class="part-content_box">
                <div class="img_box"><img src="img/body5.png"></div>
                <div class="partname">ankle</div>
            </div>
        </div>
    </div>
</div>
<!--视频播放-->
<div class="container ">
    <div class="row play ">
        <div class="col-md-4 hidden-sm hidden-xs">
            <div class="play_left">
                <img src="img/body4x.png">
            </div>
        </div>
        <div class="col-md-8">
            <div class="play-right">
                <p class="play-title">FEATURED VIDEOS</p>
                <div class="play-content">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="play-video">

                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="play_box play_down">
                                <!--<video src="movie.ogg" controls="controls">-->
                                <!--您的浏览器不支持 video 标签。-->
                                <!--</video>-->
                            </div>
                            <div class="play_box  ">
                                <!--<video src="movie.ogg" controls="controls">-->
                                <!--您的浏览器不支持 video 标签。-->
                                <!--</video>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var mySwiper = new Swiper('.swiper-container', {
            //					autoplay: 2000,
            pagination: '.swiper-pagination '
        })
    })
</script>
</body>
</html>
